var ws;
function Connect() {
    element = document.getElementById('Url');
    console.log(element);
    ws = new WebSocket(element.value);
    ws.onopen = function (evt) {
        console.log("Connection open ...");
        ws.send("Hello WebSockets!");
    };
    ws.onmessage = function (event) {
            if (typeof event.data === String) {
                console.log("Received data string");
            }
     
            if (event.data instanceof ArrayBuffer) {
                var buffer = event.data;
                console.log("Received arraybuffer");
            }
        console.log("Received Message: " + event.data);
        ws.send("ack");
        obj = JSON.parse(event.data);
        if(obj["omitted"]!=null) {
            for(var k in obj["omitted"]) {
                delete obj[k];
            }
            delete obj["omitted"];
        }
        show(obj);
    };
}
function Disconnect() {
    ws.close()
    var anchor = document.querySelector('a');
    anchor.setAttribute('download', 'node.log');
    anchor.setAttribute('href', 'data:text/html;'+toTxt());
}
var map;
var Log = new Set();
function toTxt() {
    return JSON.stringify([...Log],null,2);
}
function show(res) {
    // console.log(res)
    if( res.Longitude == null || res.Latitude == null ) {
        return
    }
    aRes = {"Longitude":res.Longitude,"Latitude":res.Latitude};
    if("IPV4" in res) {
        aRes["IPV4"] = res.IPV4;
    }
    if("IP" in res) {
        aRes["IPV4"] = res.IP+res.Port;
    }
    
    if(Log.has(aRes)) {
        return
    }

    Log.add(aRes);
    
    var pt = new BMap.Point(res.Longitude,res.Latitude);
    var info = "";
    for(var key in res) {
        if(key != "Longitude" && key != "Latitude") {
            info += key+":"+res[key]+"</br>";
        }
    }
    if(info == "") {
        return
    }
    info = info.slice(0,-5);
    // console.log(info);
    var marker = new BMap.Marker(pt);
    map.addOverlay(marker);
    var label = new BMap.Label(info);
        
    var labelStyle = {
            color: "#fff",
            backgroundColor: "#333333",
            border: "0",
            fontSize : "14px",
            width:"200px",
            opacity:"0.8",
            verticalAlign:"center",
            borderRadius: "2px",
            whiteSpace:"normal",
            wordWrap:"break-word",
            padding:"7px",
            display:"none",
        };

    label.setStyle(labelStyle);
    marker.setLabel(label);
    function myClickhide() {
        label.setStyle({display:"none"});
    }
    function myClickshow() {
        label.setStyle({display:"block"});
    }
    marker.addEventListener("mouseover", myClickshow);
    marker.addEventListener("onmouseout", myClickhide);
}

function load() 
{
    var line  = 0;
    var count = 0;
    var g = new Array();
    for(var i in IPLocation) {
        if(count==0) {
            g.push(new Array())
        }
        g[line].push(i);
        count = count+1;
        if(count==10){
            line += 1;
            count = 0;
        }
    }
    var aLine = function(l) {
        for(var v of g[l] ) {
            show(IPLocation[v])
        }
        if(l<line) {
            setTimeout(aLine(l+1),100);
        }
    }
    aLine(0);
}

function InitMap() {
    map = new BMap.Map("map");
    var center = new BMap.Point(110.,35.)
    map.centerAndZoom(center, 5); 
    map.enableScrollWheelZoom();
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    load();
}


